<template>
  <map id="mapId" class="map" 
    :style="{width: mapWidth + '%', height: mapHeight + '%'}" 
    :scale="scale"
    :show-location="showLocation" 
    :show-compass="showCompass" 
    :latitude="latitude" 
    :longitude="longitude" 
    :markers="markers" 
    :polyline="polyline"
    @markertap="handleMarkerClick"
    @labeltap="handleLabelClick"
    @callouttap="handleCalloutClick"
    @tap="handleMapClick"
    >
  </map>

</template>

<script setup lang='ts'>
/**
 * 地图组件 ———— 用于设置地图中心点位 缩放级别，地图控件显示，控制地图上相关标记点 路径，
 * 以及地图相关点击事件
 * 默认设置 地图中心: 新街口的坐标；缩放级别：16；默认不显示 当前位置；不显示指南针；
 */
interface Props {
  latitude: number | string,
  longitude: number | string,
  mapWidth?: number | string,
  mapHeight?: number | string,
  scale?: number | string,
  showLocation?: boolean,
  showCompass?: boolean,
  polyline?: object[],
  markers?: object[],
  marketClick?: Function,
  labelClick?: Function,
  calloutClick?: Function,
  mapClick?: Function,
}

const props = withDefaults(defineProps<Props>(), {
  latitude: 32.0415,
  longitude: 118.784321,
  mapWidth: 100,
  mapHeight: 90,
  scale: 16,
  showLocation: false,
  showCompass: false,
  marketClick: () => {
    return 'market click'
  },
  labelClick: () => {
    return 'label click'
  },
  calloutClick: () => {
    return 'callout click'
  },
  mapClick: () => {
    return 'map click'
  },
})

/**
 * 处理 标记点击事件，不传默认返回 market click
 */
function handleMarkerClick() {
  props.marketClick()
}
/**
 * 处理 label点击事件，不传默认返回 label click
 */
function handleLabelClick() {
  props.labelClick()
}
/**
 * 处理 标记点对应的气泡点击事件 e.detail = {markerId}，不传默认返回 callout click
 */
function handleCalloutClick() {
  props.calloutClick()
}
/**
 * 处理 地图点击，不传默认返回 map click
 */
function handleMapClick() {
  props.mapClick()
}

</script>

<style lang='less' module>
</style>
